<script setup lang="ts">
import { useUserStore, useWebSocketStore } from '/@/store'
import { storeToRefs } from 'pinia'
import { getAssetsImge } from '/@/utils/getImge'
// import socketUtils from "/@/utils/websocket"
import { ElMessage } from 'element-plus'
import { MessageDto, MessageService } from '/@/api/openapi'
import { buildTextMsg } from '/@/utils/message'
import { Search } from '@element-plus/icons-vue'
import { nextTick, onMounted, watch } from 'vue'
import MessageItem from './MessageItem.vue'

const userStore = useUserStore()
console.log('用户信息')
console.log(userStore.uid)
const webSocketStore = useWebSocketStore()
const message = ref<string>('')
const {
  currentRoomId,
  currentMemberList,
  currentContact,
  currentAllMessageList,
} = storeToRefs(webSocketStore)

const send = ref<Boolean>(true)
// 搜素键盘回车事件
const search = (e: any) => {
  console.log(e.keyCode)
  if (e.keyCode == 13 && send.value) {
    sendMessage()
  }
}
// 开启键盘监听事件
window.addEventListener('keydown', search, true)

const sendMessage = () => {
  const tmp = message.value
  console.log("点击发送消息的按钮:{}",tmp)
  if (tmp === '' || message.value === undefined) {
    return
  }
  message.value = ''
  send.value = false
  console.log('发送新消息了')
  // 目前还没有做回复消息的
  const msg: MessageDto = {
    roomId: currentRoomId.value,
    msgType: 1,
    body: buildTextMsg(tmp, undefined, undefined),
  }
  MessageService.sendMsg(msg)
    .then(
      res => {
        if (res.code !== 200 || res.data === undefined) {
          ElMessage({
            type: 'error',
            message: res.message,
          })
          return
        }
        // 放数据
        webSocketStore.updateMessage({
          pageSize: 10,
          pageNum: 1,
          roomId: currentRoomId.value,
        })
      },
      error => {
        ElMessage({
          type: 'error',
          message: error,
        })
      },
    )
    .finally(() => {
      send.value = true
    })
}

const gridData = reactive([
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
])

// 添加消息列表的ref
const messageContainer = ref<HTMLElement | null>(null)

// 添加滚动到底部的方法
const scrollToBottom = () => {
  nextTick(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight
    }
  })
}

// 监听消息列表变化
watch(currentAllMessageList, () => {
  nextTick(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight
    }
  })
})

// 添加是否显示回到底部按钮的状态
const showScrollBottom = ref(false)

// 监听滚动事件
const handleScroll = (e: Event) => {
  const target = e.target as HTMLElement
  const { scrollTop, scrollHeight, clientHeight } = target
  // 当距离底部超过200px时显示按钮
  showScrollBottom.value = scrollHeight - scrollTop - clientHeight > 200
}

// 组件挂载时滚动到底部
onMounted(() => {
  nextTick(() => {
    if (messageContainer.value) {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight
    }
  })
})
</script>

<template>
  <el-container class="container">
    <el-header height="60px">
      <div class="card-header">
        <span>{{ currentContact.name }}</span>
        <!--                <el-button class="button" text>Operation button</el-button>-->
        <el-image class="image" :src="getAssetsImge('guanli.svg')"></el-image>
      </div>
    </el-header>
    <el-main class="el-main" ref="messageContainer" @scroll="handleScroll">
      <MessageItem
        v-for="(item, index) in currentAllMessageList"
        :key="index"
        :message="item"
      />
      <!-- 添加浮动按钮 -->
      <div
        v-show="showScrollBottom"
        class="scroll-bottom-btn"
        @click="scrollToBottom"
      >
        <i class="fa fa-arrow-down"></i>
      </div>
    </el-main>
    <el-footer height="180px">
      <div class="input-action-container">
        <ul class="">
          <li>
            <i class="fa fa-smile"></i>
          </li>
          <li>
            <i class="fa fa-file"></i>
          </li>
          <li>
            <i class="fa fa-video"></i>
          </li>
          <li>
            <i class="fa fa-microphone"></i>
          </li>
        </ul>
        <ul class="">
          <li>
            <i class="fa fa-phone"></i>
          </li>
          <li>
            <i class="fa fa-video"></i>
          </li>
        </ul>
      </div>
      <div class="box-bottom">
        <el-input
          class="box-input"
          type="textarea"
          maxlength="500"
          show-word-limit
          placeholder="Enter发送，Ctrl+Enter换行"
          @keyup.enter.native="search"
          v-model="message"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
    </el-footer>
  </el-container>
</template>

<style scoped lang="scss">
$height-variable: 27px;
$primary-color: #409eff;
$bg-color: #f5f7fa;
$border-color: #e4e7ed;
$text-color: #303133;
$secondary-text: #909399;

.container {
  padding: 0;
  border-right: 1px solid $border-color;
  height: 100%;
  background: $bg-color;

  .el-header {
    padding: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    .card-header {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      background-color: #fff;
      border-bottom: 1px solid $border-color;
      border-top-right-radius: 10px;

      span {
        font-size: 16px;
        font-weight: 600;
        color: $text-color;
      }

      .image {
        height: 30px;
        width: 30px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }

  .el-main {
    padding: 20px;
    overflow: auto;
    height: calc(100vh - 360px);
    background: $bg-color;
    position: relative;
    display: flex;
    flex-direction: column-reverse;
  }

  .el-footer {
    border-top: 1px solid $border-color;
    min-height: 180px;
    padding: 12px 16px;
    background: #fff;
    margin-top: auto;

    .input-action-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0 8px 0;
      border-bottom: 1px solid $border-color;

      ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;

        li {
          margin-right: 16px;
          height: $height-variable;
          cursor: pointer;
          transition: all 0.3s;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 20px;
            color: $secondary-text;
            transition: all 0.3s;
          }

          &:hover {
            transform: scale(1.1);

            i {
              color: $primary-color;
            }
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .image {
        width: $height-variable;
        height: $height-variable;
        margin: 0 auto;
      }
    }

    .box-bottom {
      height: 70px;
      margin-top: 8px;

      .box-input {
        height: 100px;

        :deep(.el-textarea__inner) {
          border-radius: 8px;
          padding: 8px 12px;
          font-size: 14px;
          line-height: 1.5;
          resize: none;
          border: 1px solid $border-color;
          transition: all 0.3s;

          &:focus {
            border-color: $primary-color;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
          }
        }

        :deep(.el-input-group__append) {
          background: $primary-color;
          border-color: $primary-color;
          color: #fff;
          padding: 0 20px;
          cursor: pointer;
          transition: all 0.3s;
        }
      }
    }
  }
}

.scroll-bottom-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: $primary-color;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  z-index: 999;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    background-color: darken($primary-color, 5%);
  }

  i {
    font-size: 18px;
  }
}
</style>
